﻿@using WebApp.Extensions
@model Sanelib.CodeMaker.DatabaseSchema
@{
    ViewBag.CurrentPage = WebApp.Common.PageSetting.ScriptGeneratorPageSetting;    
}

@{ var sectionId = (Request.IsAjaxRequest() ? "Ajax" : "View") + "_Generator_Index"; }

@section Scripts{
    <script type="text/javascript">
        require(['Generator/Index', 'Util'], function (api, util) {
            var model = util.toJS(@(Html.ToJson(Model)));
            $(function () { api.exec('@sectionId', model); });
        });
    </script>
}

<div class="container" data-bind="stopbinding: true">
    <section id="@sectionId">
        <div class="row">
            <div class="row">
                <div class="col-md-2">Database Name</div>
                <div class="text-info col-md-2">
                    <span data-bind="text:databaseName"></span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">Description</div>
                <div class="text-info col-md-2">
                    <span data-bind="text:description"></span>
                </div>
            </div>
        </div>
        <div class="row spacer" id="tableMenu">
            <div class="col-md-3 well">
                <ul>
                    <!-- ko : foreach:tables -->
                    <li data-bind="css: paneCss"><a href="#" data-bind="text:tableName, click:$parent.selectedTable"></a></li>
                    <!-- /ko -->
                </ul>
            </div>
            <div class="col-md-9 well" data-bind="with : selectedTable">
                <div class="row">
                    <div class="col-md-2">Table Name</div>
                    <div class="text-info col-md-3">
                        <input type="text" class="form-control" data-bind="value:tableName" />
                    </div>
                    <div class="col-md-2">Description</div>
                    <div class="text-info col-md-3">
                        <input type="text" class="form-control" data-bind="value:description" />
                    </div>
                </div>
                <div class="row  spacer ">
                    <div class="col-md-3">
                        <label>
                            <span>Is Audited</span>
                            <input type="checkbox" data-bind="checked: isAudited" />
                        </label>
                    </div>
                    <div class="col-md-3">
                        <label>
                            <span>Has Name</span>
                            <input type="checkbox" data-bind="checked: hasName" />
                        </label>
                    </div>
                    <div class="col-md-3">
                        <label>
                            <span>Has Description</span>
                            <input type="checkbox" data-bind="checked: hasDescription" />
                        </label>
                    </div>
                    <div class="col-md-3">
                        <label>
                            <span>Has Thumbnail</span>
                            <input type="checkbox" data-bind="checked: hasThumbnail" />
                        </label>
                    </div>
                </div>
                <div class="spacer" style=" overflow: auto">
                    <table class="table table-hover table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>Property Name</th>
                                <th>Datatype</th>
                                <th>Size</th>
                                <th>IsUnique</th>
                                <th>IsNull</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr data-bind="with : newColumn">
                                <td class="col-md-3">
                                    <input type="text" class="form-control" data-bind="value: propertyName" placeholder="Property Name" />
                                </td>
                                <td class="col-md-3">
                                    <select class="form-control" data-bind="options: dataTypes, optionsText: 'name', optionsValue: 'id', value: dataType, optionsCaption: '-- Select Datatype --'"></select>
                                </td>
                                <td class="col-md-2">
                                    <select class="form-control" data-bind="options: size, optionsText: 'name', value: selectedSize,optionsValue: 'name', optionsCaption: '--Size--',enable: sizeSelector "></select>
                                </td>
                                <td class="col-md-1">
                                    <input type="checkbox" data-bind="checked:isUnique.ForEditing" />
                                </td>
                                <td class="col-md-1">
                                    <input type="checkbox" data-bind="checked:isNull.ForEditing" />
                                </td>
                                <td class="col-md-2">
                                    <button class="btn btn-primary" data-bind="click:$parent.createColumn"><i class="icon icon-plus"></i></button>
                                </td>
                            </tr>
                            <!-- ko foreach: columns -->
                            <tr>
                                <td>
                                    <input type="text" style="width: auto;" data-bind="visible: editting(), value: propertyName" />
                                    <span data-bind="visible: !editting(), text: propertyName"></span>
                                </td>
                                <td>
                                    <select data-bind="options: dataTypes, optionsText: 'name', value: dataType, optionsValue: 'id', optionsCaption: '-- Select Datatype --',visible: editting()," style="width: auto"></select>
                                    <span data-bind="visible: !editting(), text: dataTypeName"></span>
                                </td>
                                <td>
                                    <select data-bind="options: size, optionsText: 'name', optionsValue: 'name', value: selectedSize,visible: editting(), optionsCaption: '-- Select Size --',enable: sizeSelector " style="width: auto"></select>
                                    <span data-bind="visible: !editting(), text: selectedSize"></span>
                                </td>
                                <td>
                                    <span data-bind="visible:!editting(),text:isUnique"></span>
                                    <input type="checkbox" data-bind="visible: editting(),checked:isUnique" />
                                </td>

                                <td>
                                    <span data-bind="visible:!editting(),text:isNull"></span>
                                    <input type="checkbox" data-bind="visible: editting(),checked:isNull" />
                                </td>
                                <td>
                                    <button class="btn btn-primary" data-bind="click:edit, visible: !editting()"><i class="icon icon-edit"></i></button>
                                    <button class="btn btn-primary" data-bind="click:$parent.deleteColumn, visible: !editting()"><i class="icon icon-trash-o"></i></button>
                                    <button class="btn btn-primary" data-bind="click:update, visible: editting()"><i class="icon-upload"></i></button>
                                    <button class="btn btn-primary" data-bind="click:cancel, visible: editting()"><i class="icon icon-trash-o"></i></button>
                                </td>
                            </tr>
                            <!-- /ko -->

                        </tbody>
                    </table>
                </div>
                <div class="spacer">
                    <button class="btn btn-primary pull-right" data-bind="click:$root.saveTable">Save</button>
                    <button class="btn btn-primary pull-right" data-bind="click:$root.cancelTable" style="margin-right: 10px">Cancel</button>
                    <button class="btn btn-primary pull-right" data-bind="click:$root.deleteTable" style="margin-right: 10px">Delete</button>
                </div>
            </div>
        </div>
    </section>
</div>

